<template>
    <transition name="tips" @after-leave="handleAfterLeave">
        <div class="tipsBox" :class="isClass" v-if="visible">
            <div class="hDialog">
                <div v-html="content"></div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: "MyMessage",
    data() {
        return {
            content: '',
            time: 3000,
            visible: false,
            isClass:'',
        }
    },
    mounted() {
        this.close()
    },
    methods: {
        handleAfterLeave() {
            this.$destroy(true);                        //完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
            this.$el.parentNode.removeChild(this.$el);
        },
        close() {
            window.setTimeout(() =>{
                this.visible = false
            }, this.time);
        }
    }
}
</script>

<style lang='scss' scoped>
    .tipsBox{ 
        width:100%;
        height:100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9000;
    }
    .hDialog{   
        line-height: 0.42rem;
        padding: 0.36rem 0.54rem;
        background: rgba(0,0,0,.7);
        border-radius: 0.22rem; 
        color: #fff;
        font-size: 0.3rem;
        min-width: 2.8rem;
        max-width: 3.8rem;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);		/* IE 9 */
        -webkit-transform: translate(-50%,-50%);	/* Safari and Chrome */
        -o-transform: translate(-50%,-50%);	/* Opera */
        -moz-transform: translate(-50%,-50%);	/* Firefox */
    }
    .tip-enter-active{
        animation-name:zoomIn;animation-duration:.5s;
    }
    .tip-leave-active{
        animation-name:zoomOut;animation-duration:.5s;
    }
</style>
